<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学生</title>
<link rel="stylesheet" href="${s.base}/res/layui/css/layui.css"
	media="all" />
<link rel="stylesheet" href="${s.base}/res/css/public.css" media="all" />
</head>
<body class="childrenBody">
	<form class="layui-form">
		<blockquote class="layui-elem-quote quoteBox">
			<form class="layui-form">
				<div class="layui-inline">
					<div class="layui-input-inline">
						<input type="text" class="layui-input searchVal"
							placeholder="请输入搜索的内容" />
					</div>
					<a class="layui-btn search_btn" data-type="reload">搜索</a>
				</div>

				<div class="layui-inline" style="margin-left: 30px">
					<a class="layui-btn layui-btn-primary search_btn" id="all">可选课程</a>
				</div>
				<div class="layui-inline">
					<a class="layui-btn layui-btn-primary search_btn" id="my">已选课程</a>
				</div>
			</form>
		</blockquote>


		<table id="courseList" lay-filter="courseList"></table>
		<!--操作-->
		<script type="text/html" id="courseListBar">
		<a class="layui-btn layui-btn-xs" lay-event="choice">选课</a>
	</script>
		<!--操作-->
		<script type="text/html" id="courseListBar2">
		<a class="layui-btn layui-btn-xs" lay-event="cancelChoice">取消</a>
	</script>
	</form>
	<script type="text/javascript" src="${s.base}/res/layui/layui.js"></script>
	<script type="text/javascript">
		layui.use([ 'layer', 'table' ],
				function() {
					var layer = parent.layer === undefined ? layui.layer
							: top.layer, $ = layui.jquery, table = layui.table;

					var colsArray = [ [ {
						field : "id",
						title : "课程编号",
						sort : true,
						width : 100,
						align : "left"
					}, {
						field : "courseName",
						title : "课程名",
						minWidth : 120,
						align : "left"
					}, {
						field : "teacherName",
						title : "任课教师",
						minWidth : 120,
						align : "left"
					}, {
						field : "startDate",
						title : "开始时间",
						minWidth : 100,
						align : "center"
					}, {
						field : "endDate",
						title : "结束时间",
						minWidth : 100,
						align : "center"
					}, {
						field : "classHour",
						title : "课时",
						minWidth : 100,
						align : "center"
					}, {
						field : "testMode",
						title : "考核方式",
						minWidth : 100,
						align : "center"
					}, {
						field : "studentNum",
						title : "最大人数",
						minWidth : 100,
						align : "center"
					}, {
						field : "choiceNum",
						title : "已选（人）",
						minWidth : 100,
						align : "center"
					}, {
						title : "操作",
						width : 90,
						templet : "#courseListBar",
						fixed : "right",
						align : "center"
					} ] ];

					//courseList列表
					var tableIns = null;
					loadChoiceList(1);
					function loadChoiceList(isAll) {

						if (isAll == 1) {
							colsArray[0][9] = {
								title : "操作",
								width : 90,
								templet : "#courseListBar",
								fixed : "right",
								align : "center"
							};
						} else {
							colsArray[0][9] = {
								title : "操作",
								width : 90,
								templet : "#courseListBar2",
								fixed : "right",
								align : "center"
							};
						}
						tableIns = table.render({
							elem : "#courseList",
							url : "/course/choiceList.html",
							request : {
								pageName : "curr" //页码的参数名称
								,
								limitName : "nums" //每页数据量的参数名
							},
							where : {
								isAll : isAll,
								searchKey : $(".searchVal").val()
							//搜索的关键字
							},
							cellMinWidth : 95,
							page : true,
							height : "full-125",
							limits : [ 10, 15, 20, 25 ],
							limit : 10,
							loading : true,
							id : "courseListTable",
							cols : colsArray
						});
					}

					//搜索
					$(".search_btn").on("click", function() {
						if ($(this).attr("id") == "my") {
							loadChoiceList(0);
						} else {//搜索和all
							loadChoiceList(1);
						}
					});

					//列表操作
					table.on("tool(courseList)", function(obj) {
						var data = obj.data, layEvent = obj.event;
						var url;
						if (layEvent == "choice") {
							url = "/score/choiceCourse.html";
						} else {
							url = "/score/delete.html";
						}
						$.ajax({
							type : "get",
							data : {
								id : data.id
							},
							url : url,
							success : function(res) {
								if (res == true) {
									tableIns.reload();
									layer.close(index);
								} else {
									layer.msg(res, {
										icon : 5,
										time : 1000
									});
								}
							}
						});
					});

				});
	</script>
</body>
</html>